<template>
  <div class="app-container" style="margin-top: 15px">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="日期">
        <el-date-picker
          v-model="day"
          type="date"
          @change="createTime"
          placeholder="选择要统计的日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button :disabled="btnDisabled" type="primary" @click="create()"
        >生成</el-button
      >
    </el-form>
    <div class="chart-container">
      <div id="chart" class="chart" style="height: 500px; width: 100%" />
    </div>
  </div>
</template>
<script>
import statisticsApi from "@/api/statistics";
import * as echarts from "echarts";
export default {
  data() {
    return {
      // day:new Date(),
      day: "",
      btnDisabled: false,
      dataList: [
        {
          statisticLoginNum: "",
          statisticRegisterNum: "",
          statisticReportedUser: "",
          statisticReportedVideo: "",
          statisticVideoPublish: "",
        },
      ],
    };
  },
  // 设置监听事件
  watch: {
    //videoLikeData获取到值执行chartToShow()事件
    // dataList: {
    //   // deep: true,
    //   handler: function () {
    //     // console.log(this);
    //     this.chartToShow();
    //   },
    // },
  },
  mounted() {
    // this.chartToShow();
   
  },
  methods: {
    //设置时间不能超过现在
    createTime(data) {
      let now = new Date();
      let number = (now.getTime() + 8 * 60 * 60 * 1000) % (1000 * 60 * 60 * 24);
      this.day =
        new Date(data).getTime() - now.getTime() > 0
          ? new Date(now.getTime() - number)
          : data;
    },
    create() {
      statisticsApi.createStatistics(this.day).then((response) => {
        this.$message({
          type: "success",
          message: "生成统计数据成功",
        });
        // console.log(response.data.statistic.statisticLoginNum);
        this.dataList[0].statisticLoginNum =response.data.statistic.statisticLoginNum
        this.dataList[0].statisticRegisterNum =response.data.statistic.statisticRegisterNum
        this.dataList[0].statisticReportedUser =response.data.statistic.statisticReportedUser
        this.dataList[0].statisticReportedVideo =response.data.statistic.statisticReportedVideo
        this.dataList[0].statisticVideoPublish =response.data.statistic.statisticVideoPublish
        this.chartToShow()
        //跳转到图表显示页面
        // this.$router.push({path:'/onlinePer'})
      });
    },
     chartToShow() {
        // 基于准备好的dom，初始化echarts实例
        this.chart = echarts.init(document.getElementById("chart"));
        var option = {
          title: {
            text: "统计数据",

            left: "63%",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              type: "pie",
              radius: "70%",
              height: "92%",
              left: "38%",
              data: [
                { value: this.dataList[0].statisticLoginNum , name: "日活跃度" },
                { value: this.dataList[0].statisticRegisterNum , name: "注册人数" },
                { value: this.dataList[0].statisticReportedUser , name: "用户举报数" },
                { value: this.dataList[0].statisticReportedVideo, name: "视频举报数" },
                { value: this.dataList[0].statisticVideoPublish , name: "视频发布数" },
                // { value: 10 , name: "日活跃度" },
                // { value: 2 , name: "注册人数" },
                // { value: 4 , name: "用户举报数" },
                // { value: 3, name: "视频举报数" },
                // { value: 6 , name: "视频发布数" },
              ],
              itemStyle: {
                borderColor: "#fff",
                borderWidth: 1,
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        this.chart.setOption(option);
      },
  },
};
</script>

